<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <canvas id="myCanvas" width="400" height="400">
      <p>您的浏览器不支持 canvas!</p>
    </canvas>

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/jcanvas/dist/jcanvas.js"></script>
    <script>
      // Store the canvas object into a variable
      var $myCanvas = $('#myCanvas')

      // rectangle shape
      $myCanvas.drawRect({
        fillStyle: 'steelblue',
        strokeStyle: 'blue',
        strokeWidth: 4,
        // {Number} x, y 矩形左上角 - 相对原点的坐标
        x: 200,
        y: 200,
        /**
         * @param: {Boolean} 是否将 x,y 坐标值置于形状的中心点。
         * true(def): 将形状参照点定为矩形的中心；
         * false: 将形状参照点定为矩形的左上角；
         * （理解：见下面标注）
         * */
        fromCenter: false,
        // fromCenter: true,
        width: 200, // {Number} width 矩形宽度
        height: 100, // {Number} height 矩形高度
      })
    </script>
  </body>
</html>
